<template>
    <div>
        <h1>Affix 图钉</h1>
        <Anchor title="概述" h2></Anchor>
        <p>使用图钉，可以将内容固定在屏幕上，并且不随页面的滚动而滚动。常用于侧边菜单等。</p>
        <Anchor title="代码示例" h2></Anchor>
        <Demo title="基础用法">
            <div slot="demo">
                <Affix>
                    <span class="demo-affix">固定在最顶部</span>
                </Affix>
            </div>
            <div slot="desc">
                <p>简单使用，当元素不可见时，直接固定在最顶端。</p>
            </div>
            <i-code lang="html" slot="code">{{ code.base }}</i-code>
        </Demo>
        <Demo title="偏移">
            <div slot="demo">
                <Affix :offset-top="50">
                    <span class="demo-affix">固定在距离顶部 50px 的位置</span>
                </Affix>
            </div>
            <div slot="desc">
                <p>当滚动到一定距离时再固定。</p>
            </div>
            <i-code lang="html" slot="code">{{ code.top }}</i-code>
        </Demo>
        <Demo title="固定在底部">
            <div slot="demo">
                <Affix :offset-bottom="20">
                    <span class="demo-affix">固定在距离底部 20px 的位置</span>
                </Affix>
            </div>
            <div slot="desc">
                <p>在屏幕下方固定，可以通过缩小浏览器窗口高度来查看效果。</p>
                <p>注意，<code>offset-top</code>和<code>offset-bottom</code>只可以设置一个，如果都设置，会使用<code>offset-top</code>。</p>
            </div>
            <i-code lang="html" slot="code">{{ code.bottom }}</i-code>
        </Demo>
        <Demo title="固定状态改变时的回调">
            <div slot="demo">
                <Affix :offset-top="100" @on-change="change">
                    <span class="demo-affix">固定在距离顶部 100px 的位置</span>
                </Affix>
            </div>
            <div slot="desc">
                <p>当固定状态发生改变时，会触发事件。</p>
            </div>
            <i-code lang="html" slot="code">{{ code.change }}</i-code>
        </Demo>


        <div class="api">
            <Anchor title="API" h2></Anchor>
            <Anchor title="Affix props" h3></Anchor>
            <table>
                <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>offset-top</td>
                    <td>距离窗口顶部达到指定偏移量后触发</td>
                    <td>Number</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>offset-bottom</td>
                    <td>距离窗口底部达到指定偏移量后触发</td>
                    <td>Number</td>
                    <td>-</td>
                </tr>
                </tbody>
            </table>
            <Anchor title="Affix events" h3></Anchor>
            <table>
                <thead>
                <tr>
                    <th>事件名</th>
                    <th>说明</th>
                    <th>返回值</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>on-change</td>
                    <td>在固定状态发生改变时触发</td>
                    <td>true | false</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
	import Demo from './demo/demo.vue';
	import Anchor from './anchor.vue';
	import Code from './code/affix';
	import iCode from './code/code';


	export default {
		name: 'HelloWorld',
		data() {
			return {
				code: Code
			}
		},
		components: {
			Anchor,
			Demo,
			iCode,
        },
		methods: {
			change (status) {
				this.$Message.info(`当前状态：${status}`);
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    article {
        min-height: 1500px;
    }




    .demo-row {
        margin-bottom: 5px;
        background-image: -webkit-linear-gradient(0deg, #F5F5F5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%, transparent 12.5%, transparent 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, transparent 20.83333333%, transparent 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, transparent 37.5%, transparent 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, transparent 45.83333333%, transparent 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, transparent 62.5%, transparent 66.66666667%, #F5F5F5 66.66666667%, #F5F5F5 70.83333333%, transparent 70.83333333%, transparent 75%, #F5F5F5 75%, #F5F5F5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #F5F5F5 83.33333333%, #F5F5F5 87.5%, transparent 87.5%, transparent 91.66666667%, #F5F5F5 91.66666667%, #F5F5F5 95.83333333%, transparent 95.83333333%);
        background-image: linear-gradient(90deg, #F5F5F5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%, transparent 12.5%, transparent 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, transparent 20.83333333%, transparent 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, transparent 37.5%, transparent 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, transparent 45.83333333%, transparent 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, transparent 62.5%, transparent 66.66666667%, #F5F5F5 66.66666667%, #F5F5F5 70.83333333%, transparent 70.83333333%, transparent 75%, #F5F5F5 75%, #F5F5F5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #F5F5F5 83.33333333%, #F5F5F5 87.5%, transparent 87.5%, transparent 91.66666667%, #F5F5F5 91.66666667%, #F5F5F5 95.83333333%, transparent 95.83333333%);
    }

    .demo-col {
        color: #fff;
        padding: 30px 0;
        text-align: center;
        font-size: 18px;
        background: rgba(0, 153, 229, .7);
    }

    .demo-col.light {
        background: rgba(0, 153, 229, .5);
    }

    .demo-row.light .demo-col {
        background: rgba(0, 153, 229, .5);
    }

    .demo-row.light .demo-col.light {
        background: rgba(0, 153, 229, .3);
    }

    .example-demo .ivu-col, .example-demo .ivu-col div {
        color: #fff;
        padding: 10px 0;
        text-align: center;
        background: rgba(0, 153, 229, .9);
    }

    .example-demo .gutter .ivu-col {
        background: transparent !important;
    }

    .example-demo .ivu-col:nth-child(odd), .example-demo .ivu-col:nth-child(odd) div {
        background: rgba(0, 153, 229, .7);
    }

    .code-row-bg {
        background: rgba(0, 0, 0, .05);
    }

    p {
        margin: 5px;
        font-size: 14px;
    }

    code {
        display: inline-block;
        background: #f7f7f7;
        font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
        margin: 0 3px;
        padding: 1px 5px;
        border-radius: 3px;
        color: #666;
        border: 1px solid #eee;
    }

    li:not([class^=ivu-]) {
        margin-bottom: 5px;
        font-size: 14px;
    }

    .demo-circle-custom {

    &
    h5 {
        color: #3f414d;
        font-size: 28px;
        font-weight: normal;
    }

    &
    p {
        color: #657180;
        font-size: 14px;
        margin: 10px 0 15px;
    }

    &
    span {
        display: block;
        padding-top: 15px;
        color: #657180;
        font-size: 14px;

    &
    :before {
        content: '';
        display: block;
        width: 50px;
        height: 1px;
        margin: 0 auto;
        background: #e0e3e6;
        position: relative;
        top: -15px;
    }

    ;
    }
    &
    span i {
        font-style: normal;
        color: #3f414d;
    }

    }
    h1, h2 {
        font-weight: normal;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }

    .demo-Circle-custom {

    &
    h1 {
        color: #3f414d;
        font-size: 28px;
        font-weight: normal;
    }

    &
    p {
        color: #657180;
        font-size: 14px;
        margin: 10px 0 15px;
    }

    &
    span {
        display: block;
        padding-top: 15px;
        color: #657180;
        font-size: 14px;

    &
    :before {
        content: '';
        display: block;
        width: 50px;
        height: 1px;
        margin: 0 auto;
        background: #e0e3e6;
        position: relative;
        top: -15px;
    }

    ;
    }
    &
    span i {
        font-style: normal;
        color: #3f414d;
    }

    }
    h3 {
        font-size: 16px;
        font-weight: 400;
    }
    .api table {
        font-family: Consolas,Menlo,Courier,monospace;
        font-size: 12px;
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
        border: 1px solid #e9e9e9;
        width: 100%;
        margin-bottom: 24px
    }

    .api table th {
        background: #f7f7f7;
        white-space: nowrap;
        color: #5c6b77;
        font-weight: 600
    }

    .api table td,.api table th {
        border: 1px solid #e9e9e9;
        padding: 8px 16px;
        text-align: left
    }

    .api table td ul li {
        font-size: 12px!important
    }

</style>
